<style>
textarea {
  border: 0 none;
  overflow: hidden;
  max-height:314px;
}
</style>

<div style="height: 10px; clear: both;"></div>
<div class="row">
	<div class="col s12">
		<div class="card hoverable">
			<div class="card-action grey lighten-5">
				<h2 class="light-blue-text text-darken-4"><i class="fas fa-piggy-bank"></i> Check reserve proof</h2>
			</div>
			<div class="card-content">
				<div class="row">
					<div class="col s12 l12">
						<form id="check_funds_form">
							<div class="input-field col s12">
								<input id="public_address" type="text" class="validate">
								<label for="public_address">Address</label>
							</div>
							<div class="input-field col s12">
								<textarea id="message" class="materialize-textarea"></textarea>
								<label for="message">Message</label>
							</div>
							<div class="input-field col s12">
								<textarea id="signature" class="materialize-textarea"></textarea>
								<label for="signature">Signature</label>
							</div>
							<div class="input-field col s12">
								<input id="due_height" type="text" class="validate">
								<label for="due_height">Check as of Height</label>
							</div>
							<div class="input-field col s12">
								<a id="verify" class="waves-effect waves-light btn light-blue darken-4"><i class="fas fa-check"></i> Verify</a>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div id="verification_result" class="card-action">
				<div class="row">
					<div class="col s12 l12">
						<p id="verified"><i class="fa fa-2x"></i> <span></span></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col s12">
		<p>Hereby you can check a signature proving that the owner of "address" holds at least this much, optionally with a
			challenge string "message" and as of specified Karbo blockchain height.</p>
	</div>
<div>
<script>
	var xhrCheckReserve;
	var signature = $("#signature");
	var message = $("#message");
	var address = $("#public_address");
	var as_of_height = $("#due_height");
	var result = $("#verified");
	var result_icon = $("#verified").find("i");
	var result_text = $("#verified").find("span");
	var result_container = $("#verification_result");
	result_container.hide();

	currentPage = {
		destroy: function () {
			if (xhrCheckReserve) xhrCheckReserve.abort();
		},
		init: function () {
			$('.tooltipped').tooltip();
			M.updateTextFields();
		},
		update: function () {}
	};

	$('#check_funds_form').on('change keydown keyup paste cut', 'textarea', function () {  
	$(this).height(0).height(this.scrollHeight+2);
	if ($(this).height() >= 300) {
		$('textarea#signature').css("overflow", "auto");
	}
	else {
		$('textarea#signature').css("overflow", "hidden");
	}
	}).find('textarea#signature').change();

	$("#verify").click(function () {
		result_container.hide();
		result_text.empty();
		privateKeyType = $("[name=keyType]:checked").val();
		if (!signature.val() || !address.val()) {
			M.toast({html: 'Fill at least Address and Signature fields!', classes: 'red'}, 5000);
			return;
		}
		checkReserve();
	});

	function checkReserve() {
		if (xhrCheckReserve) xhrCheckReserve.abort();
		var height;
		var hv = as_of_height.val();
		if (hv == null || hv == "") {
			height = lastStats.last_known_block_index;
		} else {
			height = parseInt(hv)
		}

		xhrCheckReserve = $.ajax({
			url: api + '/json_rpc',
			method: "POST",
			data: JSON.stringify({
				jsonrpc: "2.0",
				id: "explorer_check_funds",
				method: "checkreserveproof",
				params: {
					message: message.val(),
					address: address.val(),
					signature: signature.val(),
					height: height
				}
			}),
			dataType: 'json',
			cache: 'false',
			success: function (data) {
				if (data.error) {
					M.toast({html: data.error.message, classes: 'red'}, 5000);
				} else {
					var res = data.result;
					result_container.removeClass("light-green lighten-5");
					result_container.removeClass("red lighten-4");
					result.removeClass("teal-text text-darken-4");
					result.removeClass("red-text text-darken-4");
					result_icon.removeClass("fa-check");
					result_icon.removeClass("fa-times");

					var isvalid = JSON.parse(res.good);

					if (isvalid) {
						result_text.html("Signature is <strong>valid</strong> and proves that " +
							"specified address holds/held at least <strong>" +
							getReadableCoins(res.total) + "</strong>, from which " +
							"as of height " + height +
							" spent: " +
							getReadableCoins(res.spent));
						result_container.addClass("light-green lighten-5");
						result.addClass("teal-text text-darken-4");
						result_icon.addClass("fa-check");
					} else {
						result_text.text("Signature is invalid!");
						result_container.addClass("red lighten-4");
						result.addClass("red-text text-darken-4");
						result_icon.addClass("fa-times");
					}
					result_container.show();
				}
			}
		});
	}	
</script>